@extends('home.layout.base')
@section('styles')
    <link href="{{ asset('css/index.css') }}" rel="stylesheet">
@endsection
@section('scripts')
    <script src="{{ asset('js/index.js') }}" type="text/javascript"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],
                    loading: false,//加载loading开关
                    params:{page : 1},
                }
            },
            created(){
                this.list();
            },
            methods: {
                list() {
                    let that = this;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('home.column.index') }}",this.params,function(res){
                            that.listData = res.data;
                            that.loading = false;
                            that.params.page ++;
                        })
                    },300);
                },
                info(id) {
                    window.location.href = "{{ route('home.column.info') }}"+'?id='+id;
                },
                paginate(){
                    this.list();
                },
                changePage(val) {
                    this.params.page = val;
                    this.list();
                },
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main column">
        <div class="row">
            <div class="col-lg-12 column-title">
                <p class="column-t">专栏作者</p>
                <p>区块链行业最有思想的 KOL 聚集地，600+ 作者深度思想引领区块链理论高地</p>
            </div>
        </div>
    </div>
    <div class="container" style="padding-bottom: 25px">
        <div class="row">
            <div class="col-lg-12" id="app" v-cloak v-loading="loading"
                 element-loading-spinner="fa fa-spinner fa-pulse" style="min-height: 250px;padding-right: 0">
                <div v-for="items in listData.data" class="col-lg-4" @click="info(items.id)">
                    <div class="main-column-item">
                        <div class="column-item-info">
                            <div class="item-info-avatar">
                                <img :src="items.avatar" alt="">
                            </div>
                            <div class="item-info-go">
                                <p class="item-info-name"> @{{ items.truename }}</p>
                                <table>
                                    <tr class="table-title">
                                        <td style="width: 80px">文章数</td>
                                        <td>浏览量</td>
                                    </tr>
                                    <tr class="table-number">
                                        <td>@{{ items.total_news }}</td>
                                        <td>@{{ items.total_views }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="column-item-note">作者简介：@{{ items.introduce ? items.introduce : '这个家伙很懒，什么也没留下' }}</div>
                    </div>
                </div>
                <div class="col-lg-12 liange-pagination">
                    <el-pagination v-if="listData && listData.last_page > 1"
                                   background
                                   :page-size="listData.per_page"
                                   layout="prev, pager, next, jumper"
                                   :total="listData.total"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   :current-page="listData.current_page"
                                   @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
@endsection




